<template>
  <div>
    <div class='loading' v-loading="loading" v-if='loading'></div>
    <div class='xinshizhen-model' v-if='model' @click='offModel'>
         <div class='model-content'>
             <h1 >请上传你的行驶证</h1>
             <div class='input-wrap'>
                 <div>
                     <p>上传行驶证</p>
                 </div>
                 <input v-if='offFile' type="file" @click.stop='empty' @change='file' ref='file'>
             </div>
         </div>
     </div>
    <div class='wrap-bg'>
      <el-row style='height:50px;line-height:50px;position:relative;top:35%;'>
        <el-col :span='5' :offset='2' style='height:50px;'>
          <img :src="oilInfo.headimg" alt="qr" width='50' height='50' style='border-radius:50%'>
        </el-col>
        <el-col :span='16' style='height:50px;'>
          <span style='color:white;'>{{oilInfo.nickname}}</span>
        </el-col>
      </el-row>
      <el-row style='position:relative;top:42%;'>
        <el-col :offset='2' :span='3'>
          卡号
        </el-col>
        <el-col :span='19'>
          {{oilInfo.oilCardNum}}
        </el-col>
      </el-row>
    </div>
   <!--  <el-button @click='invitationFri' class='btn'>
      邀请好友一起省钱
    </el-button> -->
    <div style='padding:4%;margin-top:25px;' v-if='shijian'>
      <div class='discount' @click='linquoil' v-if='state'>
        您已经领取了珠宝免费礼品劵
        <span class='fa fa-angle-down icon'></span>
      </div>
      <div v-else class='discount' @click='linquoil'>
        领取珠宝免费礼品劵
        <span class='fa fa-angle-down icon'></span>
      </div>
    </div>
    <div style='padding:4%;'>
      <div class='discount' @click='offMenu'>
        优惠攻略
        <span class='fa fa-angle-down icon'></span>
      </div>
      <div class='discount-content'>
        <p style='margin-top:5px;'>（1）关注中石油官方微信公众号“中油好客e站”，并进行注册;</p>
        <p>（2）注册成功后，进入绑卡页面添加本人加油卡;</p>
        <p>（3）绑卡成功后，通过中石油微信公众号进行充值;</p>
        <p>（4）充值优惠、使用方法及发票事宜详见公众号说明;</p>
        <p>（5）线上充值后，使用前需在加油站进行圈存（自助机/人工）;</p>
        <p>（6）持中石油趣动油卡加油，在享受中石油微信公众号优惠的基础上，叠加享受0.2元/升优惠。备注：活动优惠指定参与储值渠道为“中油好客e站”微信公众号</p>
        <p style='padding-bottom:15px;color:#bbb;'>备注：活动优惠指定参与储值渠道为“中油好客e站”微信公众号</p>
      </div>
    </div>
  </div>
</template>
<script>
  import {AJAX,URL_OIL_AVATAR,URL_ACTIVITY,_layer,URL_XINSHIZHEN,SHIJIAN} from '@/comm.js'
  export default {
    data(){
      return ({
        loading:false,
        offFile:true,
        off:false,
        shijian:true,
        state:false,
        drivingLicense:false,
        model:false,
        oilInfo:{

        }
      });
    },
    mounted(){
      let winHei=$(window).height();
      if(winHei>480&&winHei<680){
        $('.wrap-bg').css('height',winHei*37/100);
      }else if(winHei<490){
        $('.wrap-bg').css('height',winHei*43/100);
      }
    },
    created(){
      let This=this;
      AJAX({
        method:'get',
        url:URL_OIL_AVATAR
      },function(data){
        This.oilInfo=data.data.data
      });
      $.post(URL_ACTIVITY,function(data){
          console.log('活动东');
          console.log(data);
          if(data.retult){
              This.state=data.data.state;
              This.drivingLicense=data.data.drivingLicense;
              if(data.data.state){
                  _layer('恭喜您已成功获得珠宝免费礼品劵');
              }
          }else{
              _layer('领取数据拉取失败');
          }
      });
      let nowtime=SHIJIAN-Math.round(new Date() / 1000);
      if(nowtime>0){
          this.shijian=true;
      }else{
          this.shijiancuo=false;
      }
    },
    methods:{
      invitationFri(){
        //邀请好友一起省钱
      },
      offMenu(){
        this.off=!this.off;
        if(this.off){
            $('.discount-content').slideUp(300);
            $('.icon').css({
                'transform':'rotateZ(-90deg)'
            });
        }else{
            $('.discount-content').slideDown(300);
            $('.icon').css({
                'transform':'rotateZ(0deg)'
            });
        }
      },
      linquoil(){
        if(this.drivingLicense){
          this.$emit('change');
        }else{
          this.model=true;
        }
      },
      file(){
          this.offFile=false;
          let This=this;
          let file=this.$refs.file.files[0];
          let form=new FormData();
          form.append('file',file);
          this.loading=true;
          $.ajax({
              url:URL_XINSHIZHEN,
              type:'post',
              data:form, 
              cache:false,
              processData:false,
              contentType:false,
              success:function(data2){
                  This.loading=false;
                  console.log(JSON.parse(data2))
                  let data=JSON.parse(data2);
                  if(data.words_result['号牌号码'].words){
                      This.$emit('change');
                  }else{
                      _layer('请传正确的行驶证');
                  }
              }
          });
          setTimeout(function(){
            This.offFile=true;
          },1000);
      },
      offModel(){
        this.model=false;
      },
      empty(){}
    }
  }
</script>
<style scoped>
  .wrap-bg{
    position: relative;
    height: 240px;
    background: url('../../../static/img/card.png') no-repeat;
    background-size: 100%;
  }    
  .btn{
    width:92%;
    margin-left: 4%;
    background:#ff8106;
    color:white;
  }
  .discount{
    height:45px;
    padding:0 1em;
    background:white;
    font-size: 17px;
    line-height: 45px;
    letter-spacing: 2px;
    border-radius: 5px;
  }
  .discount-content{
    padding:0 1em;
    border-top:1px solid #ddd;
    border-radius: 0 0 5px 5px;
    background: white;
    font-size:14px;
    line-height: 25px;
    letter-spacing: 1.5px;
    color:#8b8b8b;
  }
  .icon{
    display: inline-block;
    height: 45px;
    line-height: 45px;
    float: right;
    transition: 0.3s;
  }
  .xinshizhen-model{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:5;
        background: rgba(0,0,0,.5);
     }
     .model-content{
        width: 80%;
        padding-bottom:30px;
        margin:50px auto;
        background: white;
        box-shadow: 0 0 10px white;
     }
     .model-content > h1 {
        padding: 25px 10px;
        color: red;
     }
     .input-wrap{
        position: relative;
        width:100px;
        height:100px;
        margin:auto;
     }
     .input-wrap > input,.input-wrap > div{
        position: absolute;
        top:0;
        width:100%;
        height: 100%
     }
     .input-wrap > div{
        background: url('../../../static/img/xiangji.png') no-repeat center 30px;
        background-size: 20px 15px;  
        border:1px dashed #eee;
     }
     .input-wrap > div > p{
        padding-top:60px; 
        text-align: center;
        color:#999;

     }
     .input-wrap > input{
        opacity: 0;
        z-index: 6;
     }
     .loading{
        position: fixed;
        top:0;
        right: 0;
        left: 0;
        bottom:0;
        z-index:10;
    }
</style>
  
